<template>
  <div>
    <div id="1">
      <!-- 附加练习-1.帅哥美女走一走 -->
      <!-- 目标: 点击按钮, 改变3个li的顺序, 在头上的就到末尾. -->
      <ul>
        <li v-for="val in arr" :key="val">{{ val }}</li>
      </ul>
      <button @click="btn">走一走</button>
    </div>
    <hr />
    <div id="2">
      <!-- 目标: 点击生成按钮, 新增一个li(随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值 -->
      <button @click="add">生成</button>
      <ul>
        <li v-for="(val, index) in arr2" :key="index">
          <strong>{{ val }}</strong>
          <button @click="del">删除</button>
        </li>
      </ul>
    </div>
    <hr />
    <div id="3">
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <!-- 循环渲染的元素tr -->
        <tr v-for="(item, index) in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.time }}</td>
          <td>
            <button @click="del2(index)">删除</button>
          </td>
        </tr>
        <tr v-if="list.length === 0">
          <td colspan="4">没有数据咯~</td>
        </tr>
      </table>
    </div>
    <hr />
    <div id="4">
      <table class="tb">
        <tr>
          <th>苹果10￥/斤 折扣&lt;八折 &gt;</th>
        </tr>
        <tr>
          <td>
            <span>请输入你要购买的斤数</span>
            <input type="text" v-model="num" />
          </td>
        </tr>
        <tr>
          <td>
            <button @click="pay">结账买单</button>
          </td>
        </tr>
        <tr>
          <td>
            <span
              >结账单：总价{{ total }}￥元 折后价：{{ rate }}￥元 省了：{{
                save
              }}￥元</span
            >
          </td>
        </tr>
      </table>
    </div>
    <hr />
    <div id="5">
      <!-- 目标: 用户选择栏目, 把用户选中的栏目信息在下面列表显示出来 -->
      <div>
        <input type="checkbox" v-model="item" value="科幻" /><span>科幻</span>
        <input type="checkbox" v-model="item" value="喜剧" /><span>喜剧</span>
        <input type="checkbox" v-model="item" value="动漫" /><span>动漫</span>
        <input type="checkbox" v-model="item" value="冒险" /><span>冒险</span>
        <input type="checkbox" v-model="item" value="科技" /><span>科技</span>
        <input type="checkbox" v-model="item" value="军事" /><span>军事</span>
        <input type="checkbox" v-model="item" value="娱乐" /><span>娱乐</span>
        <input type="checkbox" v-model="item" value="奇闻" /><span>奇闻</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["帅哥", "美女", "程序猿"],
      arr2: [1, 2, 3, 4],
      list: [
        { id: 1, name: "奔驰", time: "2020-08-01" },
        { id: 2, name: "宝马", time: "2020-08-02" },
        { id: 3, name: "奥迪", time: "2020-08-03" },
      ],
      num: "",
      total: 0,
      rate: 0,
      save: 0,
      item: [],
    };
  },
  methods: {
    btn() {
      this.arr.push(this.arr[0]);
      this.arr.shift();
    },
    add() {
      this.arr2.push(Math.floor(Math.random() * 20));
    },
    del(index) {
      this.arr2.splice(index, 1);
    },
    del2(index) {
      this.list.splice(index, 1);
    },
    pay() {
      this.total = this.num * 10;
      this.rate = this.num * 8;
      this.save = this.num * 2;
    },
  },
};
</script>

<style>
#3 {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}

table {
  margin: 0 auto;
}
</style>